<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack learn</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- <script src="./build/static/mian.js"></script> -->
  </head>
  <body>
    <div id="app">
      <div class="first-content">content : {{ content }}</div>
      <div class="box">
        <div class="box-img"></div>
        <div class="box-content">{{ content }}</div>
      </div>
      <div class="box2">
        <div class="label">姓名：</div>
        <div class="value">{{ name }}</div>
      </div>
      <!-- <a href="./static/test.pdf" target="_blank">预览test.pdf</a> -->
      <a href="./static/test.pdf">预览test.pdf</a>
      <a href="./static/test.pdf" target="_blank" download="test.pdf"
        >下载test.pdf</a
      >
      <!-- <a href="#" @click="clickDowload('D:/wfd/98.其它/10.测试/01.webpackTest/static')">下载test.pdf</a> -->
      <div class="bg-img"></div>
      <div class="iconfont icon-shucai-" style="font-size: 30px;"></div>
    </div>
  </body>
  <script>
    const vue = new Vue({
      el: "#app",
      data: {
        content: "这是 vue 的 content",
        name: "张三",
      },
      mounted() {
        console.log("mounted");
      },
      methods: {
        clickDowload(url) {
          fetch(url)
            .then((res) => {
              res.blob().then((blob) => {
                const blobUrl = window.createObjectURL(blob);
                const urlList = url.split(/\//);
                const filename = urlList.length
                  ? urlList[urlList.length - 1]
                  : urlList[0];
                const aRef = document.createElement("a");
                aRef.href = url;
                aRef.download = filename;
                aRef.click();
                window.URL.revokeObjectURL(blobUrl);
              });
            })
            .catch((err) => {
              console.error(err);
            });
        },
      },
    });
  </script>
  <style>
  </style>
</html>
